<template>
	<view style="background-color: #f8f8f8;height: 100%;">
		<!-- 顶部栏位 -->
		
		<fui-nav-bar  isFixed isOccupy custom>
			<sn-header :pageUrl="'/pages/purchase/index'"></sn-header>
			<view v-if="!dropDown" class="u-flex u-row-between" style="position: absolute;right: 35rpx;z-index: 99;">
				<view  @click="$mRouter.push({ route: '/pages/purchase/history' })" >
					<image src="/static/home/icon_history.png" class="header-icon" mode=""></image>
				</view>
				<view v-if="user.id == storeShop.managerId" 
				class="u-m-l-30"
				 @click.stop="$mRouter.push({ route: '/pages/purchase/shezhi?id='+storeShop.id })">
					<image src="/static/home/icon_shezhi.png" class="header-icon" mode=""></image> 
				</view>
				 <header-xiaoxi class="u-m-l-30" :number="2"></header-xiaoxi>
			</view>
		</fui-nav-bar>
		<view class="content bottom-speac">
			<view>
				<fui-avatar :src="storeShop.logoUrl||defaultLogo" width="120" height="120"></fui-avatar>
			</view>
			<view class="store u-flex u-row-center u-m-t-28">
				<view class="name">
					{{ storeShop.name }}
				</view>
			</view>
			<view class="u-m-t-20">
				<text class="tag" v-if="shop">
					企业编码：{{ storeShop.shopNo }}
				</text>
			</view>
			<view class="footer u-m-t-40">
				<view style="text-align: center;" @click="goBlacncePage">
					<view style="font-size: 24rpx;color: #999999;">账户余额（元）</view>
					<!-- <fui-digital-roller :value="balance" color="#333" size="44"></fui-digital-roller> -->
					<view style="margin-top: 13rpx;"><text style="font-size: 44rpx;">{{ balance }}</text></view>

					<!-- <u-count-to ref="uCountTo" :decimals="2" :end-val="balance" :autoplay="autoplay" :duration="1000"></u-count-to> -->
				</view>
				<view style="width: 1rpx;height: 90rpx;background-color: #000000;opacity: 0.1;margin: 0 80rpx"></view>
				<view style="text-align: center;" @click="$u.toast('功能暂未开放', 1000)">
					<view style="font-size: 24rpx;color: #999999;">优惠卷（张）</view>
					<view style="margin-top: 13rpx;"><text style="font-size: 44rpx;">{{ coupon }}</text></view>
				</view>
			</view>
		</view>
		<!-- 我的采购 -->
		<view class="bottom-speac box-color box-padding" v-if="showMenuList.length !==0">
			<view class="u-flex u-row-between u-m-b-50" v-if="this.isPurchase">
				<view style="font-weight: 1000;color: #333333;font-size: 32rpx;">采购订单</view>
				<view style="color: #999999;font-size: 26rpx;" @tap="$mRouter.push({ route: '/pages/purchase/order/index' })" >全部订单</view>
			</view>
			<view :class="['u-flex',{'u-m-t-50':!this.isPurchase}]" style="flex-wrap: wrap;">
				<view class="menu-item" v-for="(item,index) in showMenuList" :key="index"  @tap="$mRouter.push({ route:item.route})">
					<view class="menu-item-image">
						 <fui-badge :value="item.badge" type="danger" absolute	right="10rpx"></fui-badge>
						<!-- <u-badge type="error" :count="item.badge" :offset="[-10, 35]" :bgColor="badgeColor"></u-badge> -->
						<img style="width: 50%;" :src="item.image"></img>
					</view>
					<view class="menu-item-text">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view v-else style="height: 500rpx;flex-direction: column;" class="u-flex u-row-center" >
			<image src="/static/mendian/shoouhou_kong.png" mode="widthFix" style="width: 500rpx;"></image>
			<view style="color: #ff551a;">您没有任何采购权限~</view>
		</view>
		<!--页面加载动画-->
		<!-- <akLoading isFullScreen :active="loading"></akLoading> -->
		<!-- tabbar -->
		<fui-tabbar :isFixed="true" ></fui-tabbar>
		<!-- <u-tabbar :height="100" :key="reloadKey" :list="tabbar" :active-color="textColor" :inactive-color="textColor"></u-tabbar> -->
		<!-- <u-no-network></u-no-network> -->
	</view>
</template>

<script>
	// import HeaderXiaoxi from '@/components/header-xiaoxi/index.vue'
	import {useUserStore} from '@/store/user.js';
	import {useShopStore} from '@/store/shop.js';
	import { mapState } from 'pinia';
	import SnHeader from '@/components/sn-header.vue'
	export default {
		components: { SnHeader },
		data() {
			return {
				fillHeight: 87,
				balance: 0,
				coupon: 0,
				badgeQuantity: {},
				dropDown: false,
				autoplay:false,
				loading:false,
				reloadKey:'reload-purchase-tabbar-guid',
				menuList:
					[
					{
						name:'待确认',
						image:'static/home/icon_daifukuan.png',
						isShow:this.isPurchase||this.isReceive||this.isPayment,
						route:'/pages/purchase/order/index?current=1',
						badge:0,
					},  
					{
						name:'待发货',
						image:'static/home/icon_daifahuo.png',
						isShow:this.isPurchase||this.isReceive||this.isPayment,
						route:'/pages/purchase/order/index?current=2',
						badge:0,
					},
					{
						name:'待收货',
						image:'static/home/icon_daishouhuo.png',
						isShow:this.isPurchase||this.isReceive||this.isPayment,
						route:'/pages/purchase/order/index?current=3',
						badge:0,   
					},
					{
						name:'待评价',
						image:'static/home/icon_daipingjia.png',
						isShow:this.isPurchase||this.isReceive||this.isPayment,
						route:'/pages/purchase/order/index?current=4',
						badge:0,
					},
					{
						name:'开发票',
						image:'static/home/icon_kaifapiao.png',
						isShow:this.isPayment,
						route:'/pages/purchase/invoiceOrder/index',
						badge:0,
					},
					{
						name:'售后',
						image:'static/home/icon_shouhou.png',
						isShow:this.isBuyerAfterSales,
						route:'/pages/purchase/afterOrder/index',
						badge:0,
					},
					{
						name:'付款单',
						image:'static/home/icon_payorder.png',
						isShow:this.isPurchase||this.isPayment,
						route:'/pages/purchase/payorder/index',
						badge:0,
					},
					{
						name:'我的销售商',
						image:'static/home/icon_mysale.png',
						isShow:this.isViewAgrement,
						route:'/pages/purchase/mySale/index',
						badge:0,
					},
					{
						name:'采购报表',
						image:'static/home/report.png',
						isShow:this.isBuyerReport,
						route:'/pages/purchase/report/index',
						badge:0,
					},
				],
			}
		},
		async onShow() {
			// 获取角标
			await this.getBadgeQuantity();
			// 获取账户余额
			await this.getShopAccount();
			// 判断权限是否更新
			// if(this.$store.state.common.reloadTabbar['purchase']){
			// 	this.reloadKey = this.$u.guid(16);
			// 	this.$store.commit('common/CLOSE_TABBAR_STATUS','purchase');
			// }
		},
		async onLoad() {
			uni.hideTabBar()
			this.menuList[0].isShow = this.isPurchase||this.isReceive||this.isPayment;
			this.menuList[1].isShow = this.isPurchase||this.isReceive||this.isPayment;
			this.menuList[2].isShow = this.isPurchase||this.isReceive||this.isPayment;
			this.menuList[3].isShow = this.isPurchase||this.isReceive||this.isPayment;
			this.menuList[4].isShow = this.isPayment;
			this.menuList[5].isShow = this.isBuyerAfterSales;
			this.menuList[6].isShow = this.isPurchase||this.isPayment;
			this.menuList[7].isShow = this.isViewAgrement;
			this.menuList[8].isShow = this.isBuyerReport;
		},
		computed:{
			showMenuList:function(){
				return this.menuList.filter(item=>{
					return item.isShow
				})
			},
			...mapState(useUserStore,['isPurchase','isReceive','isPayment','isViewAgrement','isBuyerReport','isBuyerAfterSales','user']),
			...mapState(useShopStore, {
				  storeShop: 'shop'}),
		},
		methods: {
			goBlacncePage(){
				if(!(this.isPurchase||this.isPayment)){
					return this.$u.toast('当前账号没有查看账户余额的权限，请联系管理员处理~');
				}
				this.$mRouter.push({ route: '/pages/purchase/zhanghu/redpackage?balance=' + this.balance })
			},
			// 获取余额
			async getShopAccount() {
				const res = await this.$http.post('api/AccountBook/GetTotalBlance')
				if (!res) return this.balance = 0
				this.balance = res;
				this.$nextTick(()=>{
					// this.$refs.uCountTo.start()
				})
			},
			// 获取订单角标
			async getBadgeQuantity() {
				const res = await this.$http.get('api/Trade/GetStateQuantity', { params: { shopId: this.storeShop.id, isBuyerShop: true }})
				this.badgeQuantity = res
				this.menuList[0].badge = res.pendingPaymentQuantity;
				this.menuList[1].badge = res.toBeShippedQuantity;
				this.menuList[2].badge = res.pendingReceiptQuantity;
				this.menuList[3].badge = res.toBeEvaluatedQuantity;
				this.menuList[4].badge = res.invoiceQuantity;
				this.menuList[5].badge = res.afterSaleQuantity;
				this.menuList[6].badge = res.paymentQuantity;
			},
			toPage(page, index) {
				this.$mRouter.push({ route: '/pages/purchase/order/index?tab='+index })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		text-align: center;
		background-color: #FFFFFF;
		padding-bottom: 50rpx;
		.store {
			.name {
				font-size: 32rpx;
				font-weight: bold;
			}
			.tag {
				// width: 110rpx;
				line-height: 30rpx;
				height: 100%;
				padding: 5rpx 10rpx;
				border: 1px solid $theme-color;
				border-radius: 15rpx;
				margin-left: 10rpx;
				color: $theme-color;
				font-size: 18rpx;
			}
		}
		.tag {
			// width: 110rpx;
			padding: 5rpx 15rpx;
			border: 1px solid $theme-color;
			border-radius: 15rpx;
			color: $theme-color;
			font-size: 18rpx;
		}
	} 
	.footer {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.sale-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-bottom: 50rpx;
	}
	.sale-icons {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	// 下拉菜单样式修改
	::v-deep .u-dropdown__menu__item__text {
		font-weight: bold;
	}
	.menu-item{
		display: flex;
		width:25%; 
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		.menu-item-image{
			text-align: center;
			position: relative;
			width: 100%;
		}
		.menu-item-text{
			font-size: 28rpx;
			color:#333333;
			margin-top: 24rpx;
		}
	}
</style>
 